<script setup lang="ts">

// import {Modify} from "@/http/Personalcenter/Personalcenter";

// Modify({avatar:})
import {useCounterStore} from "@/stores/SaveUser";
import {computed, ref} from "vue";

const nameone = useCounterStore()
let baseUrl = 'http://192.168.5.120:8090'
const picture=nameone.userInfo.avatar
const birthday = ref('')
birthday.value = nameone.userInfo.birthday
const birthdayDate = new Date(birthday.value);
const currentDate = new Date();
let age = currentDate.getFullYear() - birthdayDate.getFullYear();
if (currentDate.getMonth() < birthdayDate.getMonth() || (currentDate.getMonth() === birthdayDate.getMonth() && currentDate.getDate() < birthdayDate.getDate())) {
    age--;
}
import {Editingdata} from "@/http/Personal center";
const data=ref({})
Editingdata().then(res=>{
    console.log(res)
    data.value=res.data
    console.log(data.value)
})
</script>

<template>
    <div>
        <div class="xinxi">
            <div class="headimage">
                <van-image
                        round
                        width="66"
                        height="66"
                        :src="baseUrl+picture"
                />
            </div>
            <div class="mingcheng">
                <p class="name">{{ data.nickname }}</p>
                <div class="year">
                    {{ age }}岁
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.xinxi {
  width: 50%;
  height: 60px;
  display: flex;
  justify-content: space-evenly;

  .headimage {
    width: 66px;
    height: 66px;
    border-radius: 33px;
    background-color: white;
    margin-right: 20px;

    :deep(.van-image__img) {
      border-radius: 33px;
    }
  }

  .mingcheng {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: -10px;

    .name {

      margin-top: 5px;
      color: #7444c4;
    }

    .year {
      width: 40px;
      height: 20px;
        line-height: 20px;
      border-radius: 10px;
        color: white;
        text-align: center;
      background-color: #9e75f5;
    }
  }
}

</style>